<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">

    <!------------------------>
    <!-- Required meta tags -->
    <!------------------------>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/styles/recipes.css">
    <script src="scripts/checklogin.js"></script>

    <!------------------------------------------>
    <!-- Bootstrap Library CSS JS CDN go here -->
    <!------------------------------------------>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bcryptjs/2.4.3/bcrypt.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet"  crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.js"  crossorigin="anonymous"></script>

    <!-- <script src="https://cdn.tailwindcss.com"></script> -->
    <!-- 引入Font Awesome -->
    <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"> -->
    <!-- 引入自定义样式 -->
    <!-------------------------------------------------------->
    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <!-------------------------------------------------------->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>


    <!-------------------------------------------->
    <!-- Other libraries and styles of your own -->
    <!-------------------------------------------->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->

</head>


<body>
    <!------------------------------>
    <!-- Your HTML Layout go here -->
    <!------------------------------>

    <!-- our own navbar goes here -->

    <!-- the body of your page goes here -->
   <!-- 导航栏 -->
    <nav id="navbarPlaceholder"></nav>

 <main class="flex-grow container mx-auto px-4 py-8">
 
        
         <main class="container">
        <section class="search-section">
            <h2 class="section-title">I have these ingredients...</h2>
            <div class="search-container">
                <input 
                    type="text" 
                    id="ingredient-input" 
                    placeholder="Input ingredients, such as tomatoes and eggs"
                    class="ingredient-input"
                >
                <button id="add-ingredient" class="add-button">
                    <i class="fa fa-plus"></i> add
                </button>
            </div>
            <div id="selected-ingredients" class="selected-ingredients">
                <p class="empty-state">Start adding the ingredients...</p>
            </div>
            <button id="generate-recipe" class="generate-button">
                <i class="fa fa-search"></i> Generate recipes
            </button>
        </section>

        <section id="recipe-results" class="recipe-results">
            <h2 class="section-title">The recipe found for you</h2>
            <div id="recipe-grid" class="recipe-grid">
            </div>
        </section>
    </main>
    
  </body>
  </html>


    <!-- our own footer goes here-->
    <nav id="footerPlaceholder"></nav>

    <!---------------------------------------------->
    <!-- Your own JavaScript functions go here    -->
    <!---------------------------------------------->
    <script src="./scripts/skeleton.js"></script>
    <!-- <script src="./scripts/script.js"></script> -->
    <script src="./scripts/authentication.js" defer></script>
    <script src="./scripts/script.js"></script>
    <script src="./scripts/recipes.js"></script>


</body>

</html>
